<template>
  <div class="page-content">
    <el-row>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="query.role" placeholder="角色名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getList">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="success" @click="handleEdit()">修改</el-button>
            <el-button type="warning" @click="handleRemove()">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelection">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="role" label="角色" width="180" />
      <el-table-column prop="sort" label="编号"/>
      <el-table-column prop="remark" label="备注"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-model:size="query.pageSize" v-model:page="query.pageNum" :total="total" @pagination="getList" />
    <dwin ref="dialog" :width="600" :url="'/view/role/edit.vue'" :title="'新增/编辑数据源'" @onclose="handleClose"></dwin>
  </div>
</template>
<script>
import Dwin from "../../component/dwin.vue";
import Pagination from "../../component/pagination.vue";
import {list,remove} from '/http/role.js'
const {ElMessage,ElMessageBox} = ElementPlus;
export default {
  components: {Dwin,Pagination},
  setup() {
    const tableData = ref([]);
    const total = ref(1);
    const dialog = ref(null);
    const selectRows = ref([])
    const model = {
      name:'',
      pageSize:20,
      pageNum:1,
      orderByColumn:'sort'
    }
    const query = reactive(Object.assign({},model))
    //const query = toRefs(react);
    const resetForm =()=>{
      Object.assign(query, model);
    }
    // const getList=()=>{
    //   list(query).then(res=>{
    //     tableData.value = res.data.data;
    //     total.value = res.data.total;
    //   })
    // }
    const handleSelection = (val) => {
      selectRows.value = val
    }
    const handleAdd = () => {
      dialog.value.open();
    }

    const handleEdit = (row) => {
      console.log(row)
      let rows = row==null?selectRows:ref([row]);
      beforeEdit(rows,()=>{
        dialog.value.open(rows.value[0]);
      })
    }

    const handleRemove = (row) => {
      let rows = row==null?selectRows:ref([row]);
      console.log(row)
      beforeRemove(rows,()=>{
        remove(rows.value.map((item) => item.role)).then(res=>{
          if(response(res)){
            getList();
          }
        })
      });
    }

    const handleClose = (refresh)=>{
      if(refresh){
        getList();
      }
    }



    return {handleAdd,
      handleEdit,
      handleRemove,
      dialog,
      tableData,
      query,
      resetForm,
      handleSelection,
      handleClose,
      total};
  }
}
</script>
<style scoped>

</style>